<template>
    <div class="box" v-if="divshow">
        <p class="log-pho"><span @click="$router.go(-1)">X</span> 手机号登录</p>
        <p class="text">登录体验更多精彩</p>
        <p class="text1">未注册手机号登陆后将自动创建账号</p>
        <p>
            <van-field v-model="phone" label="+86" placeholder="输入手机号" clickable @touchstart.stop="show = true" />
        </p>
        <div class="next" ref="aaa" @click="next">下一步</div>
        <div class="bot">找回账号</div>

    </div>
    <div class="box" v-else>
        <p class="log-pho"><span @click="$router.go(-1)">X</span> 手机号登录 <span class="ri">密码登录</span></p>
        <p class="text">请输入验证码</p>
        <p class="text1">已发送至 +86 </p>
        <p>
            <van-password-input :value="CAPTCHA" :length="4" :mask="false" :focused="showKeyboard"
                @focus="showKeyboard = true" />
            <!-- 数字键盘 -->
            <van-number-keyboard v-model="CAPTCHA" :show="showKeyboard" @blur="showKeyboard = false" />
        </p>
        <div class="next" ref="aaa" @click="login">下一步</div>
        <div class="bot">找回账号</div>

    </div>

    <van-number-keyboard v-model="phone" :show="show" :maxlength="11" @blur="show = false" />
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { phoneLogin, captchaLogin, captchaVerify } from '@/api/login'
const phone = ref('')
const CAPTCHA = ref('')
const show = ref(true)
const divshow = ref(true)
const aaa = ref(null)
const showKeyboard = ref(true)
const next = async () => {
    if (phone.value.length === 11) {
        const res = await captchaLogin(phone.value)
        console.log(res);
        divshow.value = false
    }
}
const login = async () => {
    const res = await captchaVerify(phone.value, CAPTCHA.value)
    console.log(res);
    if (res.code === 200) {
        const res1 = await phoneLogin(phone.value, CAPTCHA.value)
        console.log(res1);
    }
}

watch(phone, (newValue, oldValue) => {
    if (newValue.length === 11) {
        aaa.value.style.backgroundColor = 'red'
    }
    else { aaa.value.style.backgroundColor = '#f7c9c4' }

})


</script>
<style scoped lang="scss">
.box {
    width: 6.94rem;
    height: 5.1rem;
    margin-top: .14rem;
    margin-left: .28rem;


    >.log-pho {
        text-align: center;
        font-size: .36rem;

        >span {
            float: left;
        }

        >.ri {
            float: right;
            font-size: .24rem;
            line-height: .48rem;
            border-radius: .2rem;
            border: 1px solid #c8c8c8;
        }
    }

    >.text {
        margin-top: .8rem;
        font-size: .3rem;
        height: .3rem;
    }

    >.text1 {
        height: .64rem;
        font-size: .24rem;
        line-height: .64rem;
        color: #c8c8c8;

    }

    >.next {
        width: 6.94rem;
        height: .74rem;
        line-height: .74rem;
        border-radius: .4rem;
        background-color: #f7c9c4;
        text-align: center;
        margin-top: .68rem;
    }

    >.bot {
        text-align: center;
        font-size: .24rem;
        margin-top: .4rem;
        color: #6484b0;
    }

}
</style>